import React, { PureComponent } from 'react';
import {
  Chart,
  Geom,
  Axis,
  Tooltip,
  Legend,
} from 'bizcharts';

interface ChartInfoProps {
  chartInfo: any,
}

class ChartInfoElem extends PureComponent<ChartInfoProps> {
  render() {
    let { chartInfo } = this.props;

    chartInfo.forEach((item: any) => {
      item.value = parseFloat(item.value);
    });

    chartInfo = chartInfo.filter((chart: any) => chart.name !== '计费短信数');

    const cols = {
      date: {
        range: [0, 1],
      },
    };

    return (
      <Chart
        height={400}
        padding={[60, 40, 40, 80]}
        data={chartInfo}
        scale={cols}
        forceFit
        labelLine={{ lineWidth: 2 }}
      >
        <Axis
          name="value"
          label={{ formatter: (val: any) => `${val / 10000}w` }}
        />

        <Axis name="date" />

        <Legend position="top" />

        <Tooltip />

        <Geom
          type="line"
          position="date*value"
          size={1}
          color="name"
        />
      </Chart>
    );
  }
}

export default ChartInfoElem;
